<template>
  <div class="el-col el-col-6 height100" v-loading="loading">
    <div slot="header" class="clearfix tree-title">
      <span class="span-title">流程分类</span>
      <div style="float: right">
        <el-button class="size" size="small" @click="addParent()"  title="添加一级分类" icon="el-icon-plus" circle></el-button>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="tree-detail">
      <!-- <div class="block  "> -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-expand="expand"
        @node-collapse="collapse"
        @current-change="handleCurrentChange"
        :default-expanded-keys="defaultExpandedKeys"
        :highlight-current="true"
        node-key="id"
        class="nodes-tree"
        :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span >
              <el-button
                class="size"
                size="small"
                title="添加"
                @click="addRecord(data)" icon="el-icon-plus" circle>
              </el-button>
              <el-button
                type="primary"
                class="size"
                size="small"
                title="修改"
                @click="editRecord(data, node)" icon="el-icon-edit" circle>
              </el-button>
              <el-button
                v-if="data.children.length == 0"
                class="size"
                type="danger"
                size="small"
                title="刪除"
                @click="deleteRecord(data)" icon="el-icon-delete" circle>
              </el-button>
            </span>
          </span>
      </el-tree>
      <!-- </div> -->
    </div>

    <el-dialog :title="detailDialog.dialogTitle" :visible.sync="detailDialog.isDisplay" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="detailDialog.isDisplay" top="30px" custom-class="myDialog">
      <wf-biz-category-detail @setDialogDisplay="setDialogDisplay" @treeRefresh="treeRefresh" :detailDialog="detailDialog" :dialogRefreshProp="dialogRefreshProp"></wf-biz-category-detail>
    </el-dialog>
  </div>
</template>

<script>
  import { wfBizCategoryDetail } from '@/views/workFlowManage/workFlowDefine/components'
  import '@/styles/newstyle.scss'

  export default {
    name: 'wfBizCategoryTree',
    data() {
      return {
        loading: false,
        defaultExpandedKeys: [],
        dappendVisible: false,
        queryArgs: {},
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        dialogRefreshProp: '',
        detailDialog: {
          isDisplay: false,
          dialogTitle: '',
          editType: '',
          record: {
            id: '',
            name: '',
            parentId: '',
            parentName: ''
          }
        }
      }
    },
    props: ['asyncData'],
    created() {
      this.fetchData()
    },
    watch: {
      asyncData() { // 普通的watch监听通的watch监听
        this.fetchData()
        // console.log(this.asyncData)
      }
      // 如果路由有变化，会再次执行该方法
      // '$route.name': ['fetchData']
    },
    components: {
      wfBizCategoryDetail
    },
    // 画面刚进入method
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.fetchData()
      })
    },
    mounted() {
      // this.handleReset()
    },
    methods: {
      fetchData() {
        this.loading = true
        this.$store.dispatch('WfBizCategoryTree', this.queryArgs).then(res => {
          this.treeData = res.data
          this.loading = false
          this.setDefaultExpandedKeys(res.data)
        }).catch((err) => {
          console.log(err)
        })
      },
      addRecord(record) {
        this.resetRecord()
        this.dialogRefreshProp = new Date().getTime()
        this.detailDialog.dialogTitle = '流程分类新增'
        this.detailDialog.editType = 'add'
        this.detailDialog.isDisplay = true
        this.detailDialog.record.parentId = record.data_id
        this.detailDialog.record.parentName = record.name
      },
      addParent() {
        this.resetRecord()
        this.dialogRefreshProp = new Date().getTime()
        this.detailDialog.dialogTitle = '流程分类新增'
        this.detailDialog.editType = 'add'
        this.detailDialog.isDisplay = true
        this.detailDialog.record.parentId = '****'
        this.detailDialog.record.parentName = '顶级类型'
      },
      editRecord(record, node) {
        this.resetRecord()
        this.dialogRefreshProp = new Date().getTime()
        this.detailDialog.dialogTitle = '流程分类编辑'
        this.detailDialog.editType = 'edit'
        this.detailDialog.isDisplay = true
        this.detailDialog.record.id = record.data_id

        let parentName = ''
        let parentNode = node.parent
        if (parentNode && parentNode.data) {
          if (parentNode.data instanceof Array) {
            parentName = '顶级类型'
          } else {
            parentName = parentNode.data.name
          }
        } else {
          parentName = '顶级类型'
        }
        this.detailDialog.record.parentName = parentName
      },
      deleteRecord(record) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          let args = {}
          args.bizCateId = record.data_id
          this.$store.dispatch('WfBizCategoryDelete', args).then(res => {
            this.fetchData()
            this.loading = false
            this.$message({
              type: 'info',
              message: '删除成功！'
            })
          }).catch((err) => {
            console.log(err)
            this.$message({
              type: 'warning',
              message: '删除异常！'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      expand(data) {
        //
      },
      collapse() {
        //
      },
      setDefaultExpandedKeys(data) {
        //
        let keys = []
        data.forEach((item, index) => {
          keys.push(item.id)
        })
        this.defaultExpandedKeys = keys
      },
      setDialogDisplay() {
        this.detailDialog.isDisplay = false
      },
      treeRefresh() {
        this.fetchData()
        this.detailDialog.isDisplay = false
      },
      resetRecord() {
        this.detailDialog.dialogTitle = ''
        this.detailDialog.editType = ''
        this.detailDialog.isDisplay = false
        this.detailDialog.record.id = ''
        this.detailDialog.record.name = ''
        this.detailDialog.record.parentId = ''
        this.detailDialog.record.parentName = ''
      },
      handleCurrentChange(data, node) {
        //
        let args = {}
        args.bizCateId = data.data_id
        args.bizCateName = data.name
        this.$emit('setBizCategory', args)
      }
    }
  }
</script>
<style scoped>

  .custom-tree-node .custom-tree-nodetit {
    /* color: red; */
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }
  .custom-tree-node .custom-tree-nodetit:hover{
    /* overflow: visible; */
    /* width:90px;
    display: inline-block; */
  }

  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:4px;
    margin-left: 4px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
    height: 100%;
    overflow-y: auto;
  }
  .minSize{
    padding:4px;
  }
  .height100{
    border-right: 1px solid #ccc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .span-title{
    float: left;
    line-height: 16px;
    border-left:4px solid #000;
    padding-left: 10px;
    font-size: 16px;
    margin-top: 7px;
  }
  .myDialog{
    padding: 0px;
  }
</style>
